<template>
  <div class="review-item-content">
    <div class="review-item-title">
      <div class="review-item-left">评分及评论</div>
      <div class="review-item-right" @click="goRouter()">查看全部</div>
    </div>
    <div class="review-item-mark">
      <div class="review-item-mark-left">
        <div class="review-item-mark-number">4.7</div>
        <div class="review-item-mark-item">
          <div>满分5分</div>
          <div>500个评分</div>
        </div>
      </div>

      <div class="review-item-list">
        <div class="review-item-box">
          <div class="review-item-box-left">
            <div class="review-title">想了下还是留个记号吧</div>
            <!-- <div>123</div> -->
          </div>
          <div class="review-item-box-right">
            <div>10月8日</div>
            <div style="margin-top: 4px">
              <div>起航在风起时</div>
            </div>
          </div>
        </div>
        <div class="review-contend">
          2020年入坑2020年入坑2020年入坑2020年入坑2020年入坑2020年入坑2020年入坑
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { RouterView, useRoute, useRouter } from 'vue-router'
const router = useRouter()

const goRouter = (id) => {
  router.push({
    name: 'reviewList',
    params: {
      id,
    },
  })
}
</script>

<style lang="scss" scoped>
.review-item-content {
  padding: 20px 0;
  border-bottom: 0.0625rem solid #c6c6c8;
}
.review-item-title {
  display: flex;
  justify-content: space-between;
  .review-item-left {
    font-weight: bold;
    font-size: 18px;
  }
  .review-item-right {
    color: #1989fa;
    font-size: 16px;
  }
}
.review-item-mark {
  .review-item-mark-left {
    margin: 8px 0;
  }
  .review-item-mark-number {
    font-weight: bold;
    font-size: 40px;
  }
  .review-item-mark-item {
    margin-left: 4px;
    margin-top: 4px;
    display: flex;
    color: #8e8e93;
    justify-content: space-between;
  }
}
.review-item-list {
  background: #f2f2f7;
  padding: 10px 10px;
  border-radius: 6px;
  .review-item-box {
    display: flex;
    justify-content: space-between;
    padding-top: 4px;
    .review-item-box-left {
      font-weight: bold;
    }
    .review-item-box-right {
      color: #8e8e93;
    }
  }
  .review-contend {
    margin-top: 10px;
  }
}
</style>
